<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="../js/vue.js"></script>
    <title>LocalStorage</title>
</head>
    <!-- localstorage 不手动清楚是会一直留在这里的，相反下面的SessionStorage只要关闭浏览器 那么就会被清楚-->
<body>
    
    <div id="app">
        <button @click="setItem">添加多条</button>
        <button @click="getItem">获取一条</button>
        <button @click="deleteItem">删除一条</button>
        <button @click="deleteAllItem">清理全部</button>
    </div>

</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            
        },
        methods: {
            setItem(){
                localStorage.setItem('xfj','lzj');
                localStorage.setItem('xfj2','lzj2');
                localStorage.setItem('xfj3','lzj3');
                localStorage.setItem('xfj4','lzj4');
                let x = {name:'xfj',age:18}
                localStorage.setItem('xfj4',JSON.stringify(x));

            },
            getItem(){
                console.log(localStorage.getItem('xfj'));
                console.log(localStorage.getItem('xfj9'));//返回null
                let m = localStorage.getItem('xfj9')
                console.log(JSON.parse(m));//返回null
            },
            deleteItem(){
                console.log(localStorage.removeItem('xfj','lzj'));
            },
            deleteAllItem(){
                console.log(localStorage.clear());
            },
        },
    })


</script>
</html>